<template>
  <div>
    <el-form class="pad-t-15 form-diy goods-form">
      <!--      <el-form-item label="列表样式" label-width="80px" class="none-mar-b pad-b-10">-->
      <!--        <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">-->
      <!--          <el-radio v-model="details.listStyle" label="1">单列展示</el-radio>-->
      <!--          <el-radio v-model="details.listStyle" label="2">双列展示</el-radio>-->
      <!--        </div>-->
      <!--      </el-form-item>-->
      <el-form-item label="背景颜色" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex font-12 pad-r-30">
          <el-color-picker v-model="details.backColor" class="mar-l-12"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item label="售空图标" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">
          <el-radio v-model="details.sellType" label="0">不展示</el-radio>
          <el-radio v-model="details.sellType" label="1">样式一</el-radio>
        </div>
      </el-form-item>
      <el-form-item label="选择商品" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">
          <el-radio v-model="manual" label="1">手动选择</el-radio>
        </div>
      </el-form-item>
      <el-form-item v-if="details.componentGoodsDTOS" class="border-bar pad-t-10 mar-l-12 mar-r-12"
        v-for="(item, index) in details.componentGoodsDTOS" :key="'goods-list-' + index">
        <div class="goods-remove" @click="removeGoods(item)">
          <i class="el-icon-error" />
        </div>
        <div class="flex v-align-c goods-box mar-l-12">
          <div class="goods-pic-box mar-r-10" @click="selectGoodsLayer(item)">
            <template v-if="item.imgUrl">
              <!-- 有图片展示 -->
              <img :src="item.imgUrl" class="width-68 height-68 border-radius-5">
            </template>
            <template v-else>
              <!-- 没图片展示 -->
              <label></label>
            </template>
            <span>选择商品</span>
          </div>
          <div class="flex-item mar-t--11 mar-r-10">
            <el-input class="mar-b-3" :disabled="true" v-model="item.title">
              <template slot="prepend">名称</template>
            </el-input>
            <el-input :disabled="true" v-model="item.price">
              <template slot="prepend">价格</template>
            </el-input>
          </div>
        </div>
      </el-form-item>
      <div class="mar-l-12 mar-r-12 flex">
        <el-button class="flex-item" @click="addGoods">
          <i class="el-icon-plus mar-r-5"></i>添加商品
        </el-button>
      </div>
    </el-form>
    <!-- 商品选择弹层 -->
    <el-dialog :title="selectGoodsTitle" :visible.sync="selectGoodsVisible" :close-on-press-escape="true" width="850px">
      <div>
        <component-goods-select></component-goods-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectGoodsVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
  .goods-form{
    height: 620px;
    overflow: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 4px;    
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,0.2);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
      background: rgba(0,0,0,0.1);
    }
  }
</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getToken } from '@/utils/auth'
  import ComponentGoodsSelect from '@/components/ComponentTemplate/ComponentGoodsSelect'

  export default {
    components: {
      ComponentGoodsSelect
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      eventId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        details: {
          goodsNo: 0,
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {},
          componentGoodsDTOS: [],
          audioDTO: {},
          componentVideoDTO: {},
          formDTO: {},
          sellType: '0',
          listStyle: '1'
        },
        fileLoading: false,
        sortNo: 0,
        manual: '1',
        goodsDetails: {
          componentGoodsId: '',
          detailsId: '',
          goodsId: '',
          goodsSortNo: 0,
          imgUrl: '',
          title: '',
          price: '',
          stock: ''
        },
        selectGoodsVisible: false,
        selectGoodsTitle: null
      }
    },
    mounted() {
      const that = this
      this.$bus.$on('choiceDetailsGoods' + this.eventId, function(data) {
        that.details.componentGoodsDTOS[data.goodsSortNo].goodsSortNo = data.goodsSortNo
        that.details.componentGoodsDTOS[data.goodsSortNo].imgUrl = data.imgUrl
        that.details.componentGoodsDTOS[data.goodsSortNo].goodsId = data.goodsId
        that.details.componentGoodsDTOS[data.goodsSortNo].title = data.title
        that.details.componentGoodsDTOS[data.goodsSortNo].price = data.price
        that.details.componentGoodsDTOS[data.goodsSortNo].stock = data.stock
        that.selectGoodsVisible = false
      })
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.details = this.details1
      this.details.sellType = this.details.sellType.toString()
      this.details.listStyle = this.details.listStyle.toString()
      this.details.upperLowerMargins = Number(this.details1.upperLowerMargins)
      this.details.sideMargin = Number(this.details1.sideMargin)
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsGoods' + this.eventId, function(details) {
        that.details = details
        that.details.sellType = details.sellType.toString()
        that.details.listStyle = details.listStyle.toString()
        that.details.upperLowerMargins = Number(details.upperLowerMargins)
        that.details.sideMargin = Number(details.sideMargin)
      })
    },
    methods: {
      // 打开选择商品事件
      selectGoodsLayer(item) {
        this.selectGoodsVisible = true
        this.selectGoodsTitle = '选择商品'
        const that = this
        setTimeout(() => {
          that.$bus.$emit('selectComponentGoods' + this.eventId, item.goodsSortNo)
        }, 100)
      },
      // 添加商品
      addGoods() {
        this.resetGoods()
        if (this.details.componentGoodsDTOS.length > 0) {
          this.goodsDetails.goodsSortNo = this.details.componentGoodsDTOS.length
        } else {
          this.goodsDetails.goodsSortNo = 0
        }
        this.goodsDetails.imgUrl = 'https://enterpriseimg.joinsun.vip/upload/default-pic-red.png'
        this.details.componentGoodsDTOS.push(this.goodsDetails)
        this.$emit('scrollBottom' + this.eventId)
        this.$nextTick(() => {
          const container = this.$el.querySelector('.goods-form')
          container.scrollTop = container.scrollHeight
        })
      },
      // 删除商品
      removeGoods(label) {
        this.details.componentGoodsDTOS.splice(this.details.componentGoodsDTOS.findIndex(item => item === label), 1)
        for (let i = 0; i < this.details.componentGoodsDTOS.length; i++) {
          this.details.componentGoodsDTOS[i].goodsSortNo = i
        }
      },
      // 重置商品添加数据
      resetGoods() {
        this.goodsDetails = {
          componentGoodsId: '',
          detailsId: '',
          goodsId: '',
          goodsSortNo: 0,
          imgUrl: '',
          title: '',
          price: '',
          stock: ''
        }
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {},
          componentGoodsDTOS: [],
          audioDTO: {},
          componentVideoDTO: {},
          formDTO: {},
          sellType: '0',
          listStyle: '1'
        }
      }
    }
  }
</script>
